<template>
    <up-tabbar
        :placeholder="false"
        :value="selectedTab"
        @change="handleTabChange"
        :fixed="false"
        :safeAreaInsetBottom="false"
    >
        <up-tabbar-item v-for="item in TAB_ITEMS" :key="item.name" :text="item.text" :icon="item.icon" :name="item.name"></up-tabbar-item>
    </up-tabbar>
</template>

<script setup lang="ts">
import { ref,defineProps } from 'vue';

// 定义 props
const props = defineProps<{
  tabbarValue: string
}>();

// 提取常量
const TAB_ITEMS = [
    { text: "首页", icon: "home", name: "home" },
    { text: "分类", icon: "grid", name: "category" },
    { text: "购物车", icon: "car", name: "car" },
    { text: "我的", icon: "account", name: "mine" }
];

// 响应式数据，使用父组件传递的值初始化
const selectedTab = ref(props.tabbarValue);

// 处理标签页切换
const handleTabChange = (name) => {
    selectedTab.value = name;
    console.log(name)
    if (name === 'home') {
        uni.navigateTo({ url: '/pages/shop/home/index' });
    } else if (name === 'category') {
        uni.navigateTo({ url: '/pages/shop/category/index' });
    } else if (name === 'car') {
        uni.navigateTo({ url: '/pages/shop/car/index' });
    } else if (name === 'mine') {
        uni.navigateTo({ url: '/pages/shop/mine/index' });
    }
};

// 移除未使用的函数，如果需要保留请正确使用
// const click1 = (e) => {
// 	console.log('click1', e);
// }
</script>